<template>
    <el-card class="right-top">
        <span @click="getallmytrain" :class="defaul == 1 ? 'active' : ''">全部</span>
        <span
            v-for="(item, index) in traindata"
            :key="index"
            @click="mycreationoradd(item.myListCategory, index)"
            :class="defaul == index + 2 ? 'active' : ''"
        >
            <!-- :class="{defaul == 1?'active':''}" -->
            <!-- :class="{defaul == (index+2)?'active':''}" -->
            {{ item.name }}
        </span>
        <div class="right-btn" @click="todance">创建</div>
    </el-card>
</template>

<script setup lang="ts">
import { ElMessageBox } from 'element-plus';
import QRCode from 'qrcode';
import useTrainroomStore from '@/store/modules/trainroom';
import { ref } from 'vue';

const TrainroomStore = useTrainroomStore();
const defaul = ref(1);
//页面数据
const traindata = ref([
    {
        name: '我的创建',
        myListCategory: 'my_create',
    },
    {
        name: '我的加入',
        myListCategory: 'my_join',
    },
    {
        name: '我的课程',
        myListCategory: 'my_course',
    },
]);

//点击创建弹框
const todance = async () => {
    let imgUrl = await QRCode.toDataURL('80ca6d47566b71b01f2c193ebe010ac7');

    ElMessageBox.alert(`<img src="${imgUrl}"/>`, '请打开中舞网APP 扫码,使用此功能 ', {
        dangerouslyUseHTMLString: true,
        center: true, // 居中
        showClose: false, // 右上角关闭按钮是否显示,默认未true
        closeOnClickModal: true,
        confirmButtonText: '扫描此二维码,同样可下载“中舞网APP”', // 确认按钮
        customClass: 'winClass', //弹窗样式
    });
};

//初始页面/点击全部页面
const getallmytrain = () => {
    defaul.value = 1;
    TrainroomStore.getinittraindata();
};
//除全部点击执行的方法

const mycreationoradd = (myListCategory: string, num: number) => {
    TrainroomStore.getmytraindata(myListCategory);
    defaul.value = num + 2;
    TrainroomStore.initdatacom.slice(0,2)
};
</script>

<style scoped lang="less">
.winClass {
    width: 20px;
    font-size: 16px;
}
.right-top {
    width: 100%;
    height: 100px;
    position: relative;
    margin-bottom: 10px;
    box-sizing: border-box;
    span {
        display: inline-block;
        cursor: pointer;
        font-size: 16px;
        border-radius: 4px;
        color: #7d8090;
        padding: 9px 12px;
        margin-right: 24px;
        margin-bottom: 10px;
        user-select: none;
        &.active {
            background-color: #f93684;
            color: #fff;
        }
    }
    .right-btn {
        width: 84px;
        height: 32px;
        line-height: 32px;
        color: #fff;
        font-size: 16px;
        text-align: center;
        background-color: #f93684;
        border-radius: 16px;
        cursor: pointer;
        position: relative;
        top: -35px;
        left: 872px;
    }
}
</style>
